<template>
  <div class="card" v-for="content in contentList" :key="content.id" >
    <img @click="toDetail(content.id)" :src="content.coverImage" alt="封面图片" width="140" height="140">
    <div @click="toDetail(content.id)" class="base-info">
      <span style="font-size:20px;font-weight: bold;" v-if="content.title.length > 40">{{content.title.substring(0, 40) + '...'}}</span>
      <span style="font-size:20px;font-weight: bold;" v-else>{{content.title}}</span>
      <span style="color:#666;">{{ content.description }}</span>
      <div class="info-status" style="margin-top: 70px">
        <div style="display: flex;align-items: center">
          <good-two
              class="thumb-icon-good"
              theme="outline"
              size="15"
              fill="#333"
              :strokeWidth="2" strokeLinecap="square"
          />
          <span class="star-num" style="color:#666;">{{ content.star }}</span>
          <span class="author" style="color:#666;margin-right: 10px">{{ content.author }}</span>
          <tiny-tag size="small" v-if="contentListVisible && content.articleStatus === 0" effect="dark" type="">未审核</tiny-tag>
          <tiny-tag size="small" v-if="contentListVisible && content.articleStatus === 1" effect="dark" type="success">审核成功</tiny-tag>
          <tiny-tag size="small" v-if="contentListVisible && content.articleStatus === -1" effect="dark" type="danger">审核失败</tiny-tag>
        </div>
        <span style="float:right;color:#666;">{{ content.createTime }}</span>
      </div>
    </div>
    <div v-if="operationFlag" class="operation">
      <button class="op-edit" @click="toArticleEdit(content.id)">编辑</button>
      <button class="op-del">删除</button>
    </div>
  </div>
</template>

<script setup>
import {
  Tag as TinyTag
} from '@opentiny/vue'
import {GoodTwo} from '@icon-park/vue-next'
import {useRouter} from 'vue-router'
import {useContentStore} from "../store/useContentStore.js";
import {storeToRefs} from "pinia";
import {ref} from "vue";
import {userName} from "../config/index.js";

const {operationFlag} = defineProps({operationFlag:Boolean})
const contentStore = useContentStore()
const router = useRouter()
const {contentList, contentListVisible} = storeToRefs(contentStore)
const currentUser = ref(localStorage.getItem(userName) ? JSON.parse(localStorage.getItem(userName)) : {})



const toDetail = articleId => {
  const {href} = router.resolve( `/article/detail/${articleId}`)
  window.open(href, '_blank')
}

// 跳转到文章编辑页
const toArticleEdit = (articleId) => {
  const {href} = router.resolve({
    path:'/publish/0',
    query:{
      articleId,
      userId:currentUser.value.id,
    }
  })
  window.open(href,'_blank')
}

</script>

<style lang="less" scoped>
.operation{
  button {
    width:80px;
    background-color: #FFFFFF;
    border: 1px solid rgb(209,213,219);
    border-radius: .5rem;
    color: #111827;
    font-family: ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: .75rem 1rem;
    text-align: center;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
  }

  button:hover {
    background-color: #f9fafb;
  }

  button:focus {
    outline: 2px solid rgba(0,0,0,0.1);
    outline-offset: 2px;
  }

  button:focus-visible {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  width:10%;
  margin-left:20px;
  display:flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
.card {
  .base-info {
    .info-status {

      .i-icon-thumbs-up:hover {
        color: #747bff !important;
      }

      .star-num {
        margin-left: 3px;
        margin-right: 15px;
      }
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    width: 100%;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
  }

  box-sizing: border-box;
  //width: 90%;
  height: 150px;
  background: rgba(217, 217, 217, 0.58);
  border: 1px solid white;
  box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(6px);
  border-radius: 5px;
  padding: 5px;
  //text-align: center;
  cursor: pointer;
  transition: all 0.5s;
  display: flex;
  //align-items: center;
  user-select: none;
  color: black;
  margin-bottom: 10px;
}

.card:hover {
  border: 1px solid black;
}

.card:active {
  transform: scale(0.95) rotateZ(1.7deg);
}
</style>
